<template>
  <div class="home-nav">
    <router-view></router-view>
    <div class="common-buttom">
      <ul>
        <li :class="{ 'buttom-nav-active': buttomNavIndex === 0 }" @click="buttomNavIndex = 0">
          首页
          <i class="iconfont icon-shouye"></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<style>
.common-buttom {
  width: 10rem;
  height: 1.1rem;
  background-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;


  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid;

    li {
      width: 2.5rem;
      height: 1.1rem;
      font-size: 0.3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.buttom-nav-active {
  color: #FF6040;
  background-color: #ddd;
}
</style>
<script>
export default {
  name: 'HomeNav',
  data() {
    return {
      buttomNavIndex: 0,
      // 底部导航数组
      buttomNavList: [
        {
          name: 'home',
          path: '/',
          icon: 'icon-shouye',
          title: '首页'
        },
        {
          name: 'category',
          path: '/category',
          icon: 'icon-fenlei1',
          title: '分类'
        },
        {
          name: 'cart',
          path: '/cart',
          icon: 'icon-03f',
          title: '购物车'
        },
        {
          name: 'user',
          path: '/user',
          icon: 'icon-wode',
          title: '我的'
        }
      ]
    }
  }
}
</script>